<!doctype html>
<html lang="en" ng-app="versewise" id="ng-app">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Versewise</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/template.css" rel="stylesheet">

</head>

<body ng-controller="VersewiseCtrl">

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Versewise 0.7.2</a>
        </div>

        <ul class="nav navbar-nav">
            <li>
                <form class="navbar-form" role="search">
                    <div class="form-group" id="search">
                        <input type="text" class="form-control form-inline" placeholder="10:31 or Al-Baqara:16"
                               ng-enter="jumpTo()"
                               ng-model="jumpToText">
                    </div>
                </form>

            </li>
            <li><a href="#" title="Back" ng-click="historyBack()"><i class="glyphicon glyphicon-chevron-left"></i></a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">History ({{history.length}}) <b
                        class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li ng-repeat="h in history" ng-click="gotoHistory($index)" ng-class="historyClass($index)"><a
                            href="#">{{h}}</a></li>
                </ul>
            </li>
            <li><a href="#" title="Forward" ng-click="historyNext()"><i class="glyphicon glyphicon-chevron-right"></i></a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Recent ({{recent.length}})
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li ng-repeat="r in recent" ng-click="gotoRecent($index)"><a href="#">{{r}}</a></li>
                </ul>
            </li>


            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Favourites ({{favourites.length}})
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li ng-repeat="f in favourites" ng-click="gotoFavourite($index)"><a href="#">{{f}}</a></li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>

            <li><a href="#" title="First Page" ng-click="firstPage()"><i class="glyphicon glyphicon-fast-backward"></i></a></li>
            <li><a href="#" title="Previous Page" ng-click="prevPage()"><i class="glyphicon glyphicon-backward"></i></a></li>
            <li><a href="#" title="Next Page" ng-click="nextPage()"><i class="glyphicon glyphicon-forward"></i></a></li>
            <li><a href="#" title="Last Page" ng-click="lastPage()"><i class="glyphicon glyphicon-fast-forward"></i></a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#dataBox" data-toggle="modal">Data</a></li>
        </ul>
    </div>
</div>
<!-- Nav Bar-->

<div class="container">
    <div class="well well-sm" msd-wheel="scrollVerses($event, $delta, $deltaX, $deltaY)">
        <div ng-repeat="verse in versesView()">
        <span class="ux-verse">
            <span class="label label-primary" ng-mouseover="showAyah(verse)">
                {{verse.name}}: {{verse.verse}}
            </span>
        </span>
            <span class="ux-verse-tag" ng-repeat="tag in verse.tags">
                <span class="label label-success"
                      ng-mouseover="showTag(tag)"
                      ng-click="gotoTag(tag)"
                        title="{{tag.comments}}">
                        {{tag.name}}: {{tag.verse}}
                </span>
                &nbsp;
            </span>

            <a href="#" class="text-warning">
                <li class="glyphicon glyphicon-plus-sign" ng-click="showAddTag(verse)"></li>
            </a>

        </div>
    </div> <!-- Data-->


    <!-- Modals -->

    <div class="modal fade" id="dataBox" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Data</h4>
                </div>
                <div class="modal-body">
                    <textarea disabled class="json" rows="20" cols="80">----</textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary disabled" ng-click="loadData()">Load</button>
                </div>
            </div>
        </div>
    </div> <!-- Data Modal -->


    <div class="modal fade" id="addTag" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add Tag</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger alert-dismissable" style="display: none" id="addTagAlert">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Warning!</strong> Tag already exists or verse number exceeds total verses.
                    </div>
                    <form role="form">
                        <div class="form-group">
                            <label for="surahname">Surah name</label>

                            <select ng-model="newTag.surah" class="form-control" id="surahname"
                                    ng-options="opt.name as (opt.name + ' (' + opt.verses + ' verses)') for opt in allSurahs">
                            </select>

                        </div>
                        <div class="form-group">
                            <label for="totalverses">Total verses</label>
                            <input ng-model="newTag.verse" type="number" class="form-control" id="totalverses"
                                   placeholder="Verse">
                        </div>
                        <div class="form-group">
                            <label for="comments">Comments</label>
                            <textarea ng-model="newTag.comments" class="form-control" id="comments"
                                   placeholder="Comments" cols="20" rows="10"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" ng-click="addTag()">Add</button>
                    <button type="button" class="btn btn-primary" ng-click="addTag()" data-dismiss="modal">Add & Close
                    </button>
                </div>
            </div>
        </div>
    </div> <!-- Add Tag Modal -->

    <div class="well" id="previewArea" style="display: none">
        <a title="Add/Remove favorites" href="#" ng-click="addToFavourite()">
            <i id="favouriteIcon" class="glyphicon glyphicon-heart-empty text-success"></i>
        </a>
        &nbsp;
        <a href="#" id="pagePreview" target="_blank">alislam.org link</a><br>
        <span id="commentsPreview"></span>
        <span>
            <img src="" id="preview">
        </span>

    </div> <!-- Preview -->

</div>
<!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/json2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="js/hamster.js"></script>
<script src="js/mousewheel.js"></script>
<script src="js/data.js"></script>
<script src="js/versewise.js"></script>


</body>
</html>
